<template>
  <div v-loading="loading" class="px-20px">
    <!-- 平均每人进食量 -->
    <div class="section mb-20px">
      <div class="section-title">平均每人进食量 《中国学龄前儿童平衡膳食宝塔》</div>
      <el-table :data="nutritionData.foodIntakeList" border>
        <el-table-column prop="category" label="类别名称" width="200" />
        <el-table-column prop="standard" label="推荐范围" />
        <el-table-column prop="actual" label="实际摄入量（克/人/日）" />
        <el-table-column label="评价" width="130">
          <template #default="{ row }">
            <el-tag :type="getEvaluationType(row.evaluation)">
              {{ getEvaluationText(row.evaluation) }}
            </el-tag>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 营养素摄入量 -->
    <div class="section mb-20px">
      <div class="section-title">营养素摄入量</div>
      <el-table :data="nutritionData.nutrientIntakeList" border>
        <el-table-column prop="nutrient" label="营养素名称" width="200" />
        <el-table-column prop="dris" label="DRIs标准值" />
        <el-table-column prop="requiredRatio" label="要求比例范围" />
        <el-table-column prop="actual" label="实际摄入量" />
        <el-table-column prop="actualRatio" label="实际比例(%)" />
        <el-table-column label="评价" width="130">
          <template #default="{ row }">
            <el-tag :type="getEvaluationType(row.evaluation)">
              {{ getEvaluationText(row.evaluation) }}
            </el-tag>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 能量来源分布 -->
    <div class="section mb-20px">
      <div class="section-title">能量来源分布《2023年（中国营养学会）》</div>
      <el-table :data="nutritionData.energyDistList" border>
        <el-table-column prop="source" label="能量来源" width="200" />
        <el-table-column prop="required" label="要求比例范围(%)" />
        <el-table-column prop="actual" label="实际比例(%)" />
        <el-table-column label="评价" width="130">
          <template #default="{ row }">
            <el-tag :type="getEvaluationType(row.evaluation)">
              {{ getEvaluationText(row.evaluation) }}
            </el-tag>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 蛋白质来源分布 -->
    <div class="section mb-20px">
      <div class="section-title">蛋白质来源分布</div>
      <el-table :data="[nutritionData.proteinSource]" border>
        <el-table-column prop="animalProteinRatio" label="动物性食物蛋白占比(%)" width="200" />
        <el-table-column prop="beanProteinRatio" label="豆类蛋白占比(%)" />
        <el-table-column prop="totalHighQualityRatio" label="优质蛋白之和(%)" />
        <el-table-column label="动物性食物评价" width="130">
          <template #default="{ row }">
            <el-tag :type="getProteinEvaluationType(row.animalEvaluation)">
              {{ getProteinEvaluationText(row.animalEvaluation) }}
            </el-tag>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 配餐能量结构 -->
    <div class="section mb-20px">
      <div class="section-title">配餐能量结构</div>
      <el-table :data="nutritionData.mealEnergyList" border>
        <el-table-column prop="mealType" label="餐别" width="200" />
        <el-table-column prop="required" label="要求比例(%)" />
        <el-table-column prop="actual" label="实际比例(%)" />
        <el-table-column label="评价" width="130">
          <template #default="{ row }">
            <el-tag :type="getEvaluationType(row.evaluation)">
              {{ getEvaluationText(row.evaluation) }}
            </el-tag>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 钙磷比值 -->
    <div class="section mb-20px">
      <div class="section-title">钙磷比值</div>
      <el-table :data="[nutritionData.calciumPhosphorus]" border>
        <el-table-column prop="required" label="要求范围" width="200" />
        <el-table-column prop="actual" label="实际比值" />
        <el-table-column label="评价" width="130">
          <template #default="{ row }">
            <el-tag :type="getCalciumPhosphorusEvaluationType(row.evaluation)">
              {{ getCalciumPhosphorusEvaluationText(row.evaluation) }}
            </el-tag>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 注释 -->
    <div class="note">注：此评价分析仅供参考</div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { RecipeMenusDailyApi } from '@/api/school/recipe/menusDaily'

// 定义组件名称
defineOptions({
  name: 'NutritionTable'
})

// 定义组件属性
const props = defineProps({
  currentWeeklyMenu: {
    type: Object,
    default: () => ({})
  },
  loading: {
    type: Boolean,
    default: false
  }
})

// 定义事件
const emit = defineEmits(['update:loading'])

// 数据相关
const nutritionData = ref({
  foodIntakeList: [],
  nutrientIntakeList: [],
  energyDistList: [],
  proteinSource: {},
  mealEnergyList: [],
  calciumPhosphorus: {},
  dayCount: 0
})

// 获取评价类型（标签类型）
const getEvaluationType = (evaluation: number) => {
  switch (evaluation) {
    case -1:
      return 'danger' // 略低/偏低
    case 0:
      return 'success' // 正常
    case 1:
      return 'warning' // 略高/偏高
    default:
      return 'info'
  }
}

// 获取评价文本
const getEvaluationText = (evaluation: number) => {
  switch (evaluation) {
    case -1:
      return '略低'
    case 0:
      return '正常'
    case 1:
      return '略高'
    default:
      return '-'
  }
}

// 获取蛋白质评价文本
const getProteinEvaluationText = (evaluation: number) => {
  switch (evaluation) {
    case -1:
      return '不足'
    case 0:
      return '达标'
    default:
      return '-'
  }
}

// 获取蛋白质评价类型
const getProteinEvaluationType = (evaluation: number) => {
  switch (evaluation) {
    case -1:
      return 'danger'
    case 0:
      return 'success'
    default:
      return 'info'
  }
}

// 获取钙磷比值评价文本
const getCalciumPhosphorusEvaluationText = (evaluation: number) => {
  switch (evaluation) {
    case -1:
      return '偏低'
    case 0:
      return '正常'
    case 1:
      return '偏高'
    default:
      return '-'
  }
}

// 获取钙磷比值评价类型
const getCalciumPhosphorusEvaluationType = (evaluation: number) => {
  switch (evaluation) {
    case -1:
      return 'danger'
    case 0:
      return 'success'
    case 1:
      return 'warning'
    default:
      return 'info'
  }
}

// 加载营养统计数据
const loadNutritionData = async (menuId: number) => {
  if (!menuId) return

  emit('update:loading', true)
  try {
    const res = await RecipeMenusDailyApi.getDailyNutritionReport(menuId)
    nutritionData.value = res
  } catch (err) {
    console.error('加载营养统计数据失败', err)
  } finally {
    emit('update:loading', false)
  }
}

// 监听currentWeeklyMenu变化
watch(
  () => props.currentWeeklyMenu,
  (newVal) => {
    if (newVal && newVal.menuId) {
      loadNutritionData(newVal.menuId)
    }
  },
  { immediate: true }
)

// 暴露方法给父组件
defineExpose({
  loadNutritionData
})
</script>

<style lang="scss" scoped>
.section-title {
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: bold;
  color: #303133;
}

.note {
  padding-top: 10px;
  margin-top: 20px;
  font-size: 14px;
  color: #909399;
}
</style>
